<!-- 分销中心 -->
<template>
	<view class="fx-content" :class="{minH:title}" :style="{'--color': color}">
		<status-bar :title='title?title:"分享赚钱"' :back='1' :goHome='fromShare'></status-bar>
		<!-- <status-bar :title='title?title:"分享赚钱"' :back='title?0:1' :goHome='fromShare'></status-bar> -->

		<view style="padding-top: 30rpx;"></view>
		<view class="top-box flex-box align-center thmeBg">
			<view>
				<view class="num-lg">{{commission.cumulative_income}}</view>
				<view class="txt">
					累计{{nameDefinition.profitTitle?nameDefinition.profitTitle:'佣金'}}({{nameDefinition.profitUnit?nameDefinition.profitUnit:'元'}})
				</view>
				<view class="flex-box flex-between align-center" v-if="commission.spread_rules">
					<text @click="toUrl('/moneyPage/distributors/spreadRules')">推广说明</text>
					<text @click="toUrl('/moneyPage/capital/withdraws')">可提现：{{commission.income}}
						{{nameDefinition.profitUnit?nameDefinition.profitUnit:'元'}}
						<text class="iconfont icon-xiangyouxiayiye"></text></text>
				</view>
				<view class="flex-box flex-between" v-else>
					<text>可提现：{{commission.income}} {{nameDefinition.profitUnit?nameDefinition.profitUnit:'元'}}</text>
					<text @click="toUrl('/moneyPage/capital/withdraws')">提现<text
							class="iconfont icon-xiangyouxiayiye"></text></text>
				</view>
			</view>
			<image class="station-head-img" :src="staticUrl+'/images/station-head.png'"></image>
			<text class="iconfont icon-share1 size60 white p-ab" @click="showShareQr = true"></text>
		</view>


		<view class="vipUp" v-if="vipUpgrade.state == 1">
			<view class="Wrapper">
				<view class="wraBox">
					<view class="row  a-center">
						<text class="color_33 size28">当前等级</text>
						<text class="flex-1 ellipsis color_33 size28 text-right">{{vipUpgrade.text}}</text>
					</view>
					<view class="row j-sb a-center">
						<text class="black size36">{{vipUpgrade.vip_name}}</text>
						<view class="d-flex a-center">
							<text class="black size26">{{vipUpgrade.tip}}</text>
							<text class="black size26 m-left10">{{vipUpgrade.num}}</text>
							<text class="black size26 m-left10 m-right10">/</text>
							<text class="black size30">{{vipUpgrade.nextNum}}</text>
						</view>
					</view>
				</view>
				<view class="sharePrent">
					<button plain open-type="share" hover-class="none" class="shareBtn"></button>
					推荐好友
				</view>
			</view>

			<view class="Slider">
				<view class="Dot" :style="{width:dotPlan}"></view>
			</view>
		</view>

		<view class="menu-list flex-box">
			<block v-if="state == 1">
				<view class="menu" @click="toUrl('/moneyPage/distributors/myFans?state=1')"
					v-if="teamConfig.isManage == 1">
					<view class="icon-box">
						<text class="iconfont icon-bianzu41 thmeColor" :style="{'--color': color}"></text>
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3001.png'" mode="aspectFit"></image>
					</view>
					<view>我的团队</view>
				</view>
				<view class="menu" @click="toUrl('/pages/reserve/formSubmit?ordId='+teamConfig.orderId)"
					v-if="teamConfig.orderId > 0">
					<view class="icon-box">
						<text class="icon icon-addTodo-nav thmeColor" :style="{'--color': color}"></text>
						<image class="Icon" :src="staticUrl+'/images/jh_up/adddui.png'" mode="aspectFit"></image>
					</view>
					<view>添加成员</view>
				</view>
			</block>
			<block v-else>
				<view class="menu" @click="toUrl('/moneyPage/distributors/myFans')">
					<view class="icon-box">
						<text class="iconfont icon-bianzu41 thmeColor" :style="{'--color': color}"></text>
						<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3001.png'" mode="aspectFit"></image>
					</view>
					<view>我的会员</view>
				</view>
			</block>

			<view class="menu" @click="toUrl('/moneyPage/distributors/fenxiaoOrder?state='+state)">
				<view class="icon-box">
					<text class="iconfont icon-005 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3002.png'" mode="aspectFit"></image>
				</view>
				<view>分销订单</view>
			</view>
			<view class="menu" @click="toUrl('/moneyPage/capital/brokerage_list?state='+state)">
				<view class="icon-box">
					<text class="iconfont icon-bianzu61 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3003.png'" mode="aspectFit"></image>
				</view>
				<view>{{nameDefinition.profitTitle}}明细</view>
			</view>
			<view class="menu" @click="toUrl('/privatePage/single/codeCard')">
				<view class="icon-box">
					<text class="iconfont icon-fenlei thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3004.png'" mode="aspectFit"></image>
				</view>
				<view>推广名片</view>
			</view>
			<view class="menu" @click="tourl('/moneyPage/distributors/inviteRule')">
				<view class="icon-box">
					<text class="iconfont icon-bianzu51 thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3005.png'" mode="aspectFit"></image>
				</view>
				<view>提现说明</view>
			</view>

			<view class="menu" @click="tourl('/moneyPage/capital/addBank')"
				v-if="commission.cashMethodArr && commission.cashMethodArr.bankCard == 1">
				<view class="icon-box">
					<text class="iconfont icon-lujing thmeColor" :style="{'--color': color}"></text>
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-3006.png'" mode="aspectFit"></image>
				</view>
				<view>银行卡管理</view>
			</view>

			<block v-if="state != 1">
				<template v-if='bid == "eYiDtKWz6Qhv_bWnBJ7Knw=="'>
					<view class="menu" @click="toUrl('/moneyPage/station/train')">
						<view class="icon-box">
							<text class="iconfont icon-007 thmeColor" :style="{'--color': color}"></text>
							<image class="Icon" :src="staticUrl+'/images/jh_up/0071.png'" mode="aspectFit"></image>
						</view>
						<view>推广学堂</view>
					</view>
					<view class="menu" @click="toUrl('/moneyPage/station/publicity')">
						<view class="icon-box">
							<text class="iconfont icon-008 thmeColor" :style="{'--color': color}"></text>
							<image class="Icon" :src="staticUrl+'/images/jh_up/0081.png'" mode="aspectFit"></image>
						</view>
						<view>宣传素材</view>
					</view>
					<view class="menu" @click="toUrl('/moneyPage/station/activity')">
						<view class="icon-box">
							<text class="iconfont icon-009 thmeColor" :style="{'--color': color}"></text>
							<image class="Icon" :src="staticUrl+'/images/jh_up/0091.png'" mode="aspectFit"></image>
						</view>
						<view>活动管理</view>
					</view>
				</template>
			</block>
		</view>
		<!-- 邀请二维码 -->
		<SharePoster v-if='showShareQr' myid=' ' type='1' pageType='0' @closePoster='showShareQr=false'></SharePoster>

		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import SharePoster from "@/components/sharePoster.vue"
	let that;
	export default {
		// props:['title'],
		components: {
			SharePoster
		},
		data() {
			return {
				title: '',
				showModal: false,
				toTop: false,
				brokerage_list: [],
				noData: false,
				staticUrl: this.staticUrl,
				bid: uni.getStorageSync('bid'),

				showShareQr: false,
				commission: "",
				nameDefinition: uni.getStorageSync('startUp').nameDefinition,
				fromShare: 0, // 是否来自分享 1是 显示返回首页

				state: '', // 1 为团队管理
				teamConfig: "", // 团队管理
				vipUpgrade: '',
			}
		},

		onLoad(e) {
			let that = this;
			if (e.fromShare) {
				this.fromShare = e.fromShare
			}
			if (e.state == 1) {
				that.title = "团队管理"
				that.state = e.state;
			} else {
				that.title = "分享赚钱"
			}
			that.my_income()

		},
		created() {
			let that = this;
		},
		methods: {
			closeModel() {
				let that = this;
				let vid = uni.getStorageSync("vid");
				if (!vid || vid == 0) {
					that.showModal = true
				} else {
					that.showModal = false
					that.my_income()
				}
			},
			my_income() {
				let that = this;
				that.$http.post({
					url: '/zzj_singleSaleApi/my_income',
					data: {
						openid: that.openid,
					}
				}).then(res => {
					if (res.errcode != 100) return
					that.commission = res.data;
					that.teamConfig = res.teamConfig;
					that.vipUpgrade = res.vipUpgrade
				})
			},
			tourl(url) {
				let that = this;

				if (!this.vid) {
					that.showModal = true
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		},

		computed: {
			...mapState(['vid', 'color', 'share']),
			dotPlan() {
				if (!this.vipUpgrade || this.vipUpgrade.state == 0) return
				let nextNum = Number.parseInt(this.vipUpgrade.nextNum)
				let num = Number.parseInt(this.vipUpgrade.num)
				return (num / nextNum) * 100 + '%'
			}
		},
		onShareAppMessage(option) {
			if (option.from === 'button') { // 来自页面内分享按钮
				console.log(option.target)
			}
			return {
				title: this.share.title,
				desc: this.share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: this.share.imageUrl
			}
		},
	}
</script>

<style scoped lang="scss">
	.vipUp {
		width: 690rpx;
		padding: 24rpx;
		margin: 30rpx auto 0;

		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8rpx 24rpx;

		.Wrapper {
			width: 100%;
			display: flex;
			align-items: center;

			.wraBox {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-right: 20rpx;
			}

			.sharePrent {
				padding: 8rpx 20rpx;
				border: 1rpx solid #333;
				color: #333;
				font-size: 28rpx;
				border-radius: 30rpx;
				position: relative;
				overflow: hidden;

				.shareBtn {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					border: none;
					background-color: transparent;
				}

				.shareBtn ::after {
					border: none;
					background-color: transparent;
				}
			}
		}

		.Slider {
			width: 100%;
			height: 20rpx;
			background-color: #f2f2f2;
			border-radius: 10rpx;
			margin-top: 20rpx;
			position: relative;

			overflow: hidden;

			.Dot {
				height: 100%;
				border-radius: 10rpx;
				background-color: var(--color);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 10;
			}
		}


	}

	.fx-content {
		background-color: #FFFFFF;
		height: 100vh;

		&.minH {
			height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		}

		.top-box {
			margin: 0 30rpx;
			padding: 20rpx;
			height: 318rpx;
			border-radius: 16rpx;
			position: relative;

			.station-head-img {
				width: 100%;
				height: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}

			.icon-share1 {
				top: 20rpx;
				right: 20rpx;
				z-index: 2;
			}

			>view {
				position: relative;
				z-index: 1;
				flex: 1;

				.num-lg {
					width: 100%;
					text-align: center;
					font-size: 84rpx;
					letter-spacing: -2rpx;
					color: white;
					font-weight: bold;
					margin-bottom: 10rpx;
					margin-top: 26rpx;
				}

				.txt {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: white;
				}

				.flex-between {
					margin-top: 54rpx;

					text {
						color: white;
					}

					.icon-xiangyouxiayiye {
						margin-left: 10rpx;
					}
				}
			}
		}

		.menu-list {
			padding-top: 30rpx;
			flex-wrap: wrap;

			.menu {
				width: 33.33%;
				height: auto;
				text-align: center;
				padding-top: 50rpx;

				.icon-box {
					position: relative;

					.iconfont {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.icon {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.icon-addTodo-nav {
						font-size: 28rpx;
						margin-left: 10rpx;
						margin-top: 13rpx;
					}

					.icon-bianzu41 {
						font-size: 28rpx;
						margin-top: 6rpx;
						margin-left: 18rpx;
					}

					.icon-005 {
						margin-top: -14rpx;
					}

					.icon-bianzu61 {
						margin-top: -16rpx;
						margin-left: -2rpx;
					}

					.icon-fenlei {
						margin-top: 4rpx;
						margin-left: -16rpx;
						font-size: 30rpx;
						font-weight: bold;
						transform: rotate(90deg) translate(-50%, -50%);
					}

					.icon-bianzu51 {
						font-size: 36rpx;
						margin-left: 36rpx;
						margin-top: -6rpx;
					}

					.icon-3005 {
						border: 4rpx solid #343434;
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 20rpx;
						margin: 0 auto;
					}

					.icon-lujing {
						margin-top: -18rpx;
						margin-left: -12rpx;
						transform: scale(0.5);
					}

					.icon-007 {
						transform: scale(0.8);
						margin-top: -24rpx;
						margin-left: -24rpx;
					}

					.icon-008 {
						font-size: 28rpx;
						margin-top: -6rpx;
					}

					.icon-009 {
						font-size: 28rpx;
						margin-top: -16rpx;
					}

					.Icon {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 20rpx;
					}
				}

				view {
					font-size: 26rpx;
				}
			}
		}
	}
</style>